<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style type="text/css">
		html,body{
			width:100%;
			height: 100%;
			margin: 0;
			padding: 0;
			background-color: gray;
		}
		.main{
			width:100%;
			height: auto;
		}		
		.add{
			width:100%;
			height: 2rem;
			background-color: black;
			display: flex;
			align-items: center;
			}
		.addmodel{
			width:30%;
			height: 70%;
			display: flex;
			flex-flow: row;
			justify-content: center;
			align-items: center;
			margin: 0 auto;
		}
		.add input{
			display: block;
			width:66%;
			height: 100%;
			background-color: whitesmoke;
			margin: 0 auto;
			outline: none;
			border: none;
			border-radius: 0.3rem;
			padding-left: 0.625rem;
		}
		.add button{
			display: block;
			width:3rem;
			height: 100%;
			border-radius: 0.3rem;
			border: none;
			outline: none;
		}
		.thingsmodel{
			width:40%;
			height: auto;
			display: flex;
			flex-flow: column;
			align-items: center;
			justify-content: center;
			margin: 0 auto;
		}
		.thingstitle{
			width:100%;
			height: auto;
			display: flex;
			flex-flow: row;
			justify-content: space-between;
		}
		.things{
			width:100%;
			height: auto;
		}
		.things li{
			width:100%;
			height: auto;
			display: flex;
			flex-flow: row;
			justify-content: space-between;
			align-items: center;
			font-size: 1.5rem;
			background-color: whitesmoke;
			padding: 0 1rem;
			border-left: 0.3125rem solid #bfbfbf;
		}
		.left{
			width:auto;
			display: flex;
			flex-flow: row;
			justify-content: left;
			align-items: center;
		}
		.left input{
			width:20px;
			height: 20px;
		}
		.jian{
			width:1.25rem;
			height: 1.25rem;
			border-radius: 50%;
			border: 3px double #bfbfbf;
			background-color: black;
			text-align: center;
			line-height: 1.25rem;
			color: white;
			cursor: pointer;
		}
		[v-cloak] {
		display: none;
		} 
		
	</style>
	<body>
		<div class="main">
			<div class="add">
				<p class="addmodel">
				<input type="text" v-model="msg" v-on:keyup.enter="getvalue"/>
				<button v-on:click="getvalue">添加</button>
				</p>
			</div>
			<div class="thingsmodel" v-cloak>
			<div class="thingstitle">
				<h1>正在进行</h1>
				<h1 class="index0" v-text="nowindex">0</h1>
			</div>
				<div class="things" v-if="istrue">
					<li v-for="(item,index) in nowel" class="now">
					<p class="left">
					<input name="Checkbox" type="button" v-on:click="istrue(this,item,index)">
					<span class="cont">{{item}}</span>
					</p>
					<span class="jian" v-on:click="clearnow(item,index)">-</span>
					</li>
				</div>
			</div>
			<div class="thingsmodel" v-cloak>
			<div class="thingstitle">
				<h1>已经完成</h1>
				<h1 class="index0" v-text="haventindex"></h1>
			</div>
			<div class="things" v-if="ishavent" >
				<li v-for="(item,index) in haventel" class="havent">
				<p class="left">
				<img src="./img/checked.PNG" v-on:click="ishavent(this,item,index)" />
				<span class="cont">{{item}}</span>
				</p>
				<span class="jian" v-on:click="clearhavent(item,index)">-</span>
				</li>
			</div>
			</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	// var app = new Vue({
	// 	el:'#test',
	// 	data:{
	// 		name:[
	// 			65,100,54,45,5
	// 		]
	// 	},
	// 	computed:{
	// 	    sortItems:function(){
	// 	    return this.name.sort(sortNumber);
	// 	    }
	// 	}
	// })
	// function sortNumber(a,b){
	// 	return a-b;
	// }
	var app = new Vue({
		el:'.main',
		data:{
			msg:'',
		    nowindex:0,
			nowel:[0],
			haventindex:0,
			haventel:[0],
			checked:true
		},
		created:function(){
			var lastnowel = JSON.parse(localStorage.getItem("nowel"));
			var nowindex = parseInt(localStorage.getItem('nowindex'));
			
			if(isNaN(nowindex)){
				console.log(nowindex);
				nowindex = 0;
			}
			console.log(lastnowel);
			var lasthaventel = JSON.parse(localStorage.getItem("haventel"));
			var haventindex = parseInt(localStorage.getItem("haventindex"));
			if(isNaN(haventindex)){
				haventindex=0;
			}
			console.log("haventel:"+this.haventel);
			if(lastnowel!=undefined&&lastnowel!=null){
				this.nowel = lastnowel;
				if(lasthaventel!=undefined&&lasthaventel!=null){
					this.haventel = lasthaventel;
					console.log("last:"+this.haventel);
				}
				this.nowindex = nowindex;
				this.haventindex = haventindex;
			}
			
		},
		methods:{
			getvalue:function(){
				var msg = this.msg;
				if(msg==""||msg==null){
					alert("此字段不能为空");
					return;
				}
				this.nowindex = this.nowindex+1;
				var nowindex = this.nowindex;
				console.log(this.nowel);
				this.nowel.splice(this.nowindex-1,1,msg);
				this.localstore();
			},
			istrue:function(obj,item,index){
			this.nowel.splice(index,1); 
			console.log(this.haventel);
			this.haventel.splice(this.haventindex,0,item);
			this.nowindex = this.nowindex-1;
			this.haventindex = this.haventindex+1;
			if(this.nowindex<0){
				this.nowindex=this.nowel.length;
			}if(this.haventindex<0){
				this.haventindex=this.haventel.length;
			}
			this.localstore();
			},
			ishavent:function(obj,item,index){
				this.haventel.splice(index,1);
				var len = this.nowel.length; 
				this.nowel.splice(this.nowindex,0,item);
				this.haventindex = this.haventindex-1;
				this.nowindex = this.nowindex+1;
				if(this.nowindex<0){
					this.nowindex=this.nowel.length;
				}if(this.haventindex<0){
					this.haventindex=this.haventel.length;
				}
				this.localstore();
				Vue.set(obj,"checked","checked");
			},
			clearnow:function(item,index){
				this.nowel.splice(index-1,1);
				this.nowindex = this.nowindex-1;
				if(this.nowindex<0){
					this.nowindex=this.nowel.length;
				}if(this.haventindex<0){
					this.haventindex=this.haventel.length;
				}
				this.localstore();
			},
			clearhavent:function(item,index){
				this.haventel.splice(index,1);
				this.haventindex = this.haventindex-1;
				if(this.nowindex<0){
					this.nowindex=this.nowel.length;
				}if(this.haventindex<0){
					this.haventindex=this.haventel.length;
				}
				this.localstore();
			},
			localstore:function(){
				var nowel = this.nowel;
				console.log(nowel);
				var haventel = this.haventel;
						if(nowel!=undefined){
							localStorage.setItem('nowel',JSON.stringify(this.nowel));
							localStorage.setItem('nowindex',this.nowindex);
							if(haventel!=undefined){
								localStorage.setItem('haventel',JSON.stringify(this.haventel));
								localStorage.setItem('haventindex',this.haventindex);
							}
							console.log("yes");
						}else{
							console.log(3);
						}
			}

		}
	
	});
</script>
